<template>
  <span v-html="highlighted"></span>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  text: string
  query: string
}>()

const highlighted = computed(() => {
  if (!props.query) return props.text
  const regex = new RegExp(`(${props.query})`, 'gi')
  return props.text.replace(regex, '<mark>$1</mark>')
})
</script>

<style scoped>
mark {
  background: #ffecb3;
  padding: 0 2px;
  border-radius: 2px;
}
</style>